<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Tiendalia - Administración</title>
    </h:head>
    <h:body>
        <ui:composition template="template.xhtml">
            <ui:define name="sidebar">
                <ui:include src="adminmenu.xhtml"/>
            </ui:define>
            <ui:define name="content">

                <p:dataTable id="productsTable" styleClass="adminTable" var="product" value="#{admProductBean.productModel}" selectionMode="single"
                             selection="#{admProductBean.selectedProduct}" editable="true">
                    <f:facet name="header">
                        <h:outputText styleClass="headerTitle" value="Productos" />
                        <p:graphicImage styleClass="imgBtn" url="resources/images/add.png" alt="Añadir producto" title="Añadir producto" onclick="panel.toggle();"/>
                        <p:messages id="newProductMessages" autoUpdate="true"/>
                        <p:panel id="pnl" collapsed="true" toggleable="true" widgetVar="panel" >
                            <h:form id="newProductForm" styleClass="editForm" prependId="false">
                                <h:outputLabel styleClass="title" value="Nuevo producto"/>
                                <p:panelGrid columns="2" columnClasses="editLabel, editValue">
                                    <h:outputLabel value="Nombre: " for="newproductname" />
                                    <p:inputText id="newproductname" value="#{admProductBean.newProduct.name}" requiredMessage="Todos los campos son obligatorios"/>

                                    <h:outputLabel value="Precio: " for="newproductprice" />
                                    <p:inputText id="newproductprice" value="#{admProductBean.newProduct.price}" requiredMessage="Todos los campos son obligatorios">
                                        <p:watermark for="newproductprice" value="Formato: 99,99 €"/>
                                        <f:convertNumber currencySymbol="€" type="currency" minFractionDigits="2" maxFractionDigits="2" maxIntegerDigits="5"/>
                                    </p:inputText>

                                    <h:outputLabel value="Categoría: " for="newproductcategory" />
                                    <p:selectOneMenu id="newproductcategory" value="#{admProductBean.categoryName}" >
                                        <f:selectItems value="#{admProductBean.categories}" />
                                    </p:selectOneMenu>

                                    <h:outputLabel value="Descripción: " for="newproductdesc" />
                                    <p:inputTextarea id="newproductdesc" value="#{admProductBean.newProduct.description}" styleClass="remainingChars" counter="newCounter" maxlength="255"
                                                     counterTemplate="{0} caracteres restantes." autoResize="false"/>
                                    <h:outputText />
                                    <h:outputText id="newCounter" class="remainingChars" />

                                </p:panelGrid>
                                <p:commandButton value="Añadir a la tienda" action="#{admProductBean.insertProduct()}" update=":productsTable" process="@(pnl)"/>
                                <p:commandButton value="Limpiar campos" action="#{admProductBean.clearCurrentProduct()}"  update=":productsTable:pnl" process="@none" />
                            </h:form>
                        </p:panel>
                    </f:facet>
                    <p:ajax event="rowEdit" listener="#{admProductBean.onRowEdit}" update="newProductMessages"  />
                    <p:column headerText="ID">
                        <h:outputText value="#{product.id}" />
                    </p:column>
                    <p:column headerText="Nombre">
                        <p:cellEditor>
                            <f:facet name="output">
                                <p:commandLink action="#{admProductBean.goToProduct(product.id)}" value="#{product.name}" process="@this" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText styleClass="edit" value="#{product.name}" style="width:96%"/>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column headerText="Precio">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{product.price}">
                                    <f:convertNumber type="currency" currencySymbol="€"/>
                                </h:outputText>
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText styleClass="edit" value="#{product.price}" style="width:96%"/>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="Descripción">
                        <p:cellEditor>
                            <f:facet name="output">
                                <p:inputTextarea value="#{product.description}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputTextarea value="#{product.description}" styleClass="edit" style="width:100%"/>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>
                    <p:column style="width:1%">
                        <p:rowEditor />
                    </p:column>
                </p:dataTable>
            </ui:define>
        </ui:composition>
    </h:body>
</html>